[Vue warn]: 属性或方法 "markers" 未在实例上定义但在渲染期间被引用

Question

我正在构建一个 vue 和传单应用程序，但我一直收到此错误。

[Vue 警告]：属性或方法“markers”未在实例上定义，但在渲染期间被引用。

我找不到问题，变量中的名称和代码都拼写正确，并且它们都在同一个组件中。

（注意：这不是 [Vue warn] 的副本：属性或方法未在实例上定义但在渲染期间被引用因为我的是在单个文件组件中，而且那里的答案对我没有帮助）

这是我的代码

<template>
  <div class="containerTest">
    <div style="height: 80vh">
    <LMap :zoom="zoom" :center="center">
      <LTileLayer :url="url"></LTileLayer>
      <l-marker
        :key="index"
        v-for="(brew, index) in markers"
        :lat-lng="latLng(brew.latitude, brew.longitude)"


      ></l-marker>
      <!-- <LMarker :lat-lng="[47.413220, -1.219482]"></LMarker>
      <LMarker :lat-lng="[46.193220, 4.82]"></LMarker>
      <LMarker :lat-lng="[45.193220, 6.82]"></LMarker>
      <LMarker :lat-lng="[47.03220, -0.9482]"></LMarker>
      <LMarker :lat-lng="[46.03220, 2.9482]"></LMarker> -->
    </LMap>
  </div>
  </div>

</template>
      
<script>

import { LMap, LTileLayer, LMarker } from "vue2-leaflet";

export default {
  name: "Map",
  data: function () {
    return {
      markers: []
    }
  },
  components: {
    LMap,
    LTileLayer,
    LMarker
  },
  data() {
    return {
      url: "https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=CFmlXsYmVozAdWKEtdT5",
      zoom: 6,
      center: [46.5322, 2.9482],
      bounds: null
    };
  },
  mounted: function () {
    fetch('https://api.openbrewerydb.org/breweries').then((response) => {
      return response.json();
    }).then(json=>{
        this.brews = json
        console.log(this.brews)
    })
  },
  methods: {
    latLng: function(lat, lng) {
      return L.latLng(lat,lng);
    },
  }
};
</script>

Answer 1

您打错字了：您已声明 data 两次。

将 markers 移动到第二个 data 声明中并删除第一个声明，它会正常工作，这是这里唯一出错的地方：

Vue.component('l-map', window.Vue2Leaflet.LMap);
Vue.component('l-tile-layer', window.Vue2Leaflet.LTileLayer);
Vue.component('l-marker', window.Vue2Leaflet.LMarker);

new Vue({
  el: '#app',
  name: "Map",
  /*data: function () { // Duplicate data declaration
    return {
      markers: [] <--- Move this down into data() vvv
    }
  },*/
  data() {
    return {
      url: "https://api.maptiler.com/maps/streets/{z}/{x}/{y}.png?key=CFmlXsYmVozAdWKEtdT5",
      zoom: 6,
      center: [46.5322, 2.9482],
      bounds: null,
      markers: [] // <--- Correct Markers location
    };
  },
  mounted: function() {
    fetch('https://api.openbrewerydb.org/breweries').then((response) => {
      return response.json();
    }).then(json => {
      this.brews = json
      //console.log(this.brews);
    })
  },
  methods: {
    latLng: function(lat, lng) {
      return L.latLng(lat, lng);
    },
  }
});

<!-- Vue2 and Vue2-Leaflet CDN Imports -->
<script src="https://unpkg.com/vue@2.6.14/dist/vue.min.js"></script><link rel="stylesheet" href="https://unpkg.com/leaflet@1.7.1/dist/leaflet.css" /><script src="https://unpkg.com/leaflet@1.7.1/dist/leaflet.js"></script><script src="https://unpkg.com/vue2-leaflet@2.7.1/dist/vue2-leaflet.min.js"></script>

<div id="app" class="containerTest">
  <div style="height: 80vh">
    <l-map :zoom="zoom" :center="center">
      <l-tile-layer :url="url"></l-tile-layer>
      <l-marker
        :key="index"
        v-for="(brew, index) in markers"
        :lat-lng="latLng(brew.latitude, brew.longitude)"
      ></l-marker>
      <l-marker :lat-lng="[47.413220, -1.219482]"></l-marker>
      <l-marker :lat-lng="[46.193220, 4.82]"></l-marker>
      <l-marker :lat-lng="[45.193220, 6.82]"></l-marker>
      <l-marker :lat-lng="[47.03220, -0.9482]"></l-marker>
      <l-marker :lat-lng="[46.03220, 2.9482]"></l-marker>
    </l-map>
  </div>
</div>

[Vue warn]: 属性或方法 "markers" 未在实例上定义但在渲染期间被引用

[Vue warn]: Property or method "markers" is not defined on the instance but referenced during render

javascript

leaflet

vue.js

[Vue warn]: 属性 或方法 "markers" 未在实例上定义但在渲染期间被引用

[Vue warn]: Property or method "markers" is not defined on the instance but referenced during render

javascript

leaflet

vue.js

[Vue warn]: 属性或方法 "markers" 未在实例上定义但在渲染期间被引用